<template>
    <div style="background-color: #1989fa">
    <el-divider style="margin: 0;"></el-divider>
        <el-table :data="devices"  style="width: 100% ;overflow: hidden; height: 100vh; display: flex; flex-direction: column;">
            <el-table-column fixed prop="id" label="Id" width="150" />
            <el-table-column prop="deviceName" label="设备名" width="120" />
            <el-table-column prop="deviceStatus" label="设备状态" width="120" />
            <el-table-column prop="deviceType" label="设备类型" width="120" />
            <el-table-column prop="devicePrice" label="设备价格" width="120" />
            <el-table-column prop="dateAdded" label="生产日期" width="480" />
            <el-table-column prop="buyer" label="购买者" width="120" />
            <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="{ row }" >
                <el-button link type="primary" size="small" @click="handleClick(row.id)">
                    删除
                </el-button>
                <el-button link type="primary" size="small"
                           @click="modify(row.id,row.deviceName,row.deviceStatus,row.deviceType,row.devicePrice,row.buyer)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    </div>

    <el-dialog
        v-model="dialogVisible"
        title="设备详情"
        width="500"
        :before-close="handleClose"
    >
        <el-radio-group v-model="labelPosition" aria-label="label position">
            <el-radio-button value="left">Left</el-radio-button>
            <el-radio-button value="right">Right</el-radio-button>
            <el-radio-button value="top">Top</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px" />
        <el-form
            :label-position="labelPosition"
            label-width="auto"
            :model="formLabelAlign"
            style="max-width: 600px"
        >
            <el-form-item label="设备名称">
                <el-input v-model="formLabelAlign.deviceName" />
            </el-form-item>
            <el-form-item label="设备价格">
                <el-input v-model="formLabelAlign.devicePrice" />
            </el-form-item>
            <el-form-item label="设备类型">
                <el-input v-model="formLabelAlign.deviceType" />
            </el-form-item>
            <el-form-item label="设备状态">
                <el-input v-model="formLabelAlign.deviceStatus" />
            </el-form-item>
            <el-form-item label="买家">
                <el-input v-model="formLabelAlign.buyer" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateDevice()">
                    修改完成
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import axios from "axios";
import request from "../utils/request";

import { ref } from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import { reactive} from 'vue'
import type { FormProps } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('top')

const formLabelAlign = reactive({
    id: 0,
    deviceName: '',
    deviceType: '',
    deviceStatus: 0,
    devicePrice: '',
    buyer: ''


})

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

interface Device {
    id: number;
    deviceName: string;
    deviceType: string;
    deviceStatus: number;
    devicePrice: string;
    buyer: string | null;
    dateAdded: string;
}

const props = defineProps<{
    devices: Device[];
}>();

const test = () => {
    console.log(props.devices); // 使用 props 访问 devices
};

const params = {
    id: 0, // 假设要传递的参数是 id
};

const updateDevice = ()=>{
    console.log(formLabelAlign)

    ElMessage({
        message: '修改成功',
        type: 'success',
        plain: true,
    })
    axios.post("http://localhost:9091/devices/modify",formLabelAlign).then(res=>{
        console.log(res)
    })
    dialogVisible.value = false
}

const modify = (id, deviceName, deviceStatus, deviceType, devicePrice,buyer) => {
    // 在这里编写修改操作的逻辑，可以使用传入的参数进行相应的处理
    console.log(id)
    console.log(deviceName)
    console.log(deviceStatus)
    console.log(deviceType)
    console.log(devicePrice)
    formLabelAlign.id = id
    formLabelAlign.deviceName= deviceName
    formLabelAlign.deviceType = deviceType
    formLabelAlign.deviceStatus= deviceStatus
    formLabelAlign.devicePrice = devicePrice
    formLabelAlign.buyer = buyer

    dialogVisible.value = true

};

const handleClick = (id: number) => {
    ElMessage({
        message: '删除成功',
        type: 'success',
        plain: true,
    })
    console.log(id)
    params.id = id;
    axios.get('http://localhost:9091/devices/delete', {
        params: params
    }).then(res=>{
        console.log(res)
    })
    // request.get("http://localhost:9091/devices/delete",id).then(res=>{
    //     console.log(res)
    // })
    // axios.get("http://localhost:9090/devices/delete/${id}").then(res=>{
    //     console.log(res)
    // })
};


</script>
